<template>
	<view class="interest">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
					
		</view>
		<view class="interest-top">
			<view class="interest-top-left">
				<image src="@/static/TestImg/img/loan/salesman.jpg" mode="" class="interestImg  on"></image>
			</view>
			<view class="interest-top-right">
				<image src="@/static/icon/more.png" mode="" class="interestImg"></image>
			</view>
		</view>
		<view class="interest-bottom">
			<h1>选择你的兴趣</h1>
			<view class="interest-bottom-intetrest">
				<view class="interest-bottom-intetrest-img" v-for="(item, index) in ToSelect" :key="index">
					<image :src="item.img" mode="" class="interestImg to" @click="checkboxs(index)"></image>
					<text class="interest-text">{{ item.name }}</text>
					<view class="interest-checkbox" :class="{ 'alter': item.selected }"></view>
				</view>
			</view>
		</view>
		<view class="interest-btn">
			<u-button text="上一步" shape="circle" @click="huiq"></u-button>
			<u-button :text="text" shape="circle" color='#f72647' :disabled="disabled"
				@click="xia"></u-button>
		</view>
	</view>
</template>

<script>
	import checkboxGroup from '../../uni_modules/uview-ui/libs/config/props/checkboxGroup';
	export default {
		data() {
			return {
				checkbox: true,
				disabled: true,
				text: "至少选择4个",
				//被选择的
				beChosen: [],
				//要做选择的
				ToSelect: [{
					name: "旅行",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E6%97%85%E8%A1%8C.jpg ",
					IntertestId: 1
				}, {
					name: "美妆",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E5%8F%A3%E7%BA%A2.jpg",
					IntertestId: 2
				}, {
					name: "刺激战场",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E5%88%BA%E6%BF%80%E6%88%98%E5%9C%BA.jpg  ",
					IntertestId: 3
				}, {
					name: "王者荣耀",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80.jpg ",
					IntertestId: 4
				}, {
					name: "英雄联盟",
					selected: false,
					img: "https://pic.rmb.bdstatic.com/bjh/events/01e669cc38fe3cd3a6fb5434e5054e868575.jpeg@h_1280",
					IntertestId: 5
				}, {
					name: "无畏契约",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E6%97%A0%E7%95%8F%E5%A5%91%E7%BA%A6.jpg  ",
					IntertestId: 6
				}, {
					name: "巧克力",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E5%B7%A7%E5%85%8B%E5%8A%9B.jpg ",
					IntertestId: 7
				}, {
					name: "养生",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E5%85%BB%E7%94%9F.jpg   ",
					IntertestId: 8
				}, {
					name: "阳阳",
					selected: false,
					img: "https://mer-1325659292.cos.ap-nanjing.myqcloud.com/hobby%2F%E9%98%B3%E9%98%B3.jpg",
					IntertestId: 9
				}],
				profileSetupVo: {}
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('Interest', data => {
				// data.id 即为传递过来的参数值
				this.profileSetupVo = data
			});
		},
		
		methods: {
			checkboxs(index) {
				this.$set(this.ToSelect, index, {
					...this.ToSelect[index],
					selected: !this.ToSelect[index].selected
				});

				if (this.ToSelect[index].selected) {
					this.beChosen.push(this.ToSelect[index].name);
				} else {
					this.beChosen = this.beChosen.filter(item => item !== this.ToSelect[index].name);
				}

				this.disableds();
			},
			skip() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			disableds() {
				if (this.beChosen.length >= 4) {
					// console.log(this.beChosen.length);
					this.text = "下一步";
					this.disabled = false;
					console.log(this.profileSetupVo.interestIds);
				} else {
					this.text = "至少选择4个";
					this.disabled = true;
				}
			},
			huiq() {
				uni.navigateBack({
					delta: 1
				})
			},
			xia() {
				// this.request("/profileSetup/updateProfileSetup","post",this.profileSetupVo)
				uni.switchTab({
					url: '/pages/index/index',
				})
			}

		}
	}
</script>

<style scoped>
	.interest-top {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.interest-top-left,
	.interest-top-right {
		width: 150rpx;
		height: 60rpx;
	}

	.interestImg {
		width: 80rpx;
		height: 75rpx;
		object-fit: cover;
		object-position: center;
	}

	.on {
		width: 215rpx;
		height: 75rpx;
	}

	.interest-bottom {
		display: flex;
		overflow: hidden;
		overflow-y: auto;
		height: 1300rpx;
		align-items: center;
		flex-direction: column;
	}

	.interest-bottom-intetrest {
		width: 80%;
		display: flex;
		justify-content: space-evenly;
		align-content: space-around;
		flex-wrap: wrap;
	}

	.interest-bottom-intetrest-img {
		width: 200rpx;
		height: 200rpx;
		margin-top: 30rpx;
	}

	.to {
		width: 180rpx;
		height: 180rpx;
	}

	.interest-text {
		color: white;
		left: 8rpx;
		position: relative;
		top: -55rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 13rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.interest-checkbox {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1px solid white;
		position: relative;
		top: -220rpx;
		left: 145rpx;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.alter {
		background-color: #f72647;
	}

	.interest-btn {
		display: flex;
		justify-content: space-evenly;
		align-content: center;
	}
	.skip {
		width: 100%;
		padding: 10rpx 0;
		display: flex;
		justify-content: right;
		font-size: 35rpx;
	}
</style>